<template>
	<view v-if="imgUrl" class="common">
		<view class="user">
			<!-- <canvas canvas-id="star_canvas" class="mycanvas" :style="'width:100%;height:240px;'"></canvas> -->
			<view class="userInfo" @click="show=true">
				<u-avatar :src="user ? (imgUrl + user.avatar) : ''" shape="circle" size="60">
				</u-avatar>
				<u-text :text="user?user.nickname:'点击完善资料'" color="#fff" size="16" align="center">
				</u-text>
			</view>
			<view class="vote">
				<u-row>
					<u-col span="4" @click="goto('/pages/active/active?type=1')">
						<view class="number">{{vote.create || 0}}</view>
						<view class="text">发起的投票</view>
					</u-col>
					<u-col span="4" @click="goto('/pages/active/active?type=2')">
						<view class="number">{{vote.joins || 0}}</view>
						<view class="text">参与的投票</view>
					</u-col>
					<u-col span="4" @click="goto('/pages/active/active?type=3')">
						<view class="number">{{vote.apply || 0}}</view>
						<view class="text">报名的投票</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="menu">
			<u-cell-group :border="false">

				<u-cell title="常见问题" isLink icon="file-text-fill" :iconStyle="{color:color_value}" :border="false"
					url="/pages/faq/index"></u-cell>
				<u-cell title="投诉管理" isLink icon="chat-fill" :iconStyle="{color:color_value}" :border="false"
					url="/pages/complaint/index"></u-cell>
<!-- 				<u-cell title="电脑后台" isLink icon="grid-fill" :iconStyle="{color:color_value}" :border="false"
					@click="diannaoShow=true" v-if="active && active.computer_manage == 1" rightIcon="grid"
					:rightIconStyle="{color:color_value}"></u-cell> -->
				<u-cell title="关注我们" isLink icon="weixin-fill" :iconStyle="{color:color_value}" :border="false"
					@click="wx_qrcode_show = true" v-if="system.wx_qrcode" rightIcon="photo"
					:rightIconStyle="{color:color_value}"></u-cell>
				<!-- #ifdef MP-WEIXIN -->
				<u-cell title="联系客服" isLink icon="server-man" :iconStyle="{color:color_value}" :border="false"
					customStyle="position:relative" rightIcon="question" :rightIconStyle="{color:color_value}">
					<template slot="value">
						<button open-type="contact" class="u-reset-button"
							style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"></button>
					</template>
				</u-cell>
				<!-- #endif -->
				<u-cell title="清理缓存" isLink icon="trash-fill" :iconStyle="{color:color_value}" :border="false"
					@click="clearStorage()" rightIcon="cut" :rightIconStyle="{color:color_value}"></u-cell>
			</u-cell-group>
		</view>
		<view class="ad">
			<ad :unit-id="ad.user_video" ad-type="video" ad-theme="white" v-if="ad && ad.user_video"></ad>
		</view>

		<u-modal :show="wx_qrcode_show" :closeOnClickOverlay="true" :showConfirmButton="false"
			@close="wx_qrcode_show = false">
			<image :src="imgUrl + system.wx_qrcode" mode="widthFix"></image>
		</u-modal>

		<u-popup :show="diannaoShow" round="5" mode="bottom" @close="diannaoShow=false;">
			<view class="url_box">
				<view style="text-align: right;color: #f00;font-size: 12px;" v-if="store"
					@click="reset_show = true;diannaoShow=false;">重置密码</view>
				<u-text text="后台地址:" lineHeight="40"></u-text>
				<u-input :value="system.domain+'/kzvote'" disabled="true"></u-input>
				<block v-if="!store">
					<u-text text="账号:" lineHeight="40"></u-text>
					<u-input v-model="form.username" placeholder="请输入账号"></u-input>
					<u-text text="密码:" lineHeight="40"></u-text>
					<u-input v-model="form.password" placeholder="请输入密码"></u-input>
					<button @click="register()" :class="color+'-bg'">注册</button>
				</block>
				<block v-else>
					<u-text text="账号:" lineHeight="40"></u-text>
					<u-input v-model="store" disabled="true"></u-input>
					<button @click="copy(system.domain+'/kzvote')" :class="color+'-bg'">复制并关闭</button>
				</block>
			</view>
		</u-popup>

		<!-- 重置密码 -->
		<u-popup round="5" :show="reset_show" mode="center" closeable @close="reset_show = false" :showConfirmButton="false" :customStyle="{width:'80%',padding:'30px 0'}">
			<view class="url_box" style="width: 100%;">
				<u-input v-model="password" placeholder="请输入新密码"></u-input>
				<button @click="reset()" :class="color+'-bg'">重置密码</button>
			</view>
		</u-popup>

		<monster></monster>
		<setuser v-model="show" @updated="updated"></setuser>
		<tabbar></tabbar>
		<canvas canvas-id="star_canvas" class="mycanvas"
			:style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
	</view>
</template>

<script>
	const Point = class {
		constructor(x, y) {
			this.x = x
			this.y = y
			this.r = 1 + Math.random() * 2
			this.sx = Math.random() * 2 - 1
			this.sy = Math.random() * 2 - 1
		}

		draw(ctx) {
			ctx.beginPath()
			ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
			ctx.closePath()
			ctx.fillStyle = '#fff'
			ctx.fill()
		}

		move(w, h) {
			this.x += this.sx
			this.y += this.sy
			if (this.x > w || this.x < 0) this.sx = -this.sx
			if (this.y > h || this.y < 0) this.sy = -this.sy
		}

		drawLine(ctx, p) {
			const dx = this.x - p.x
			const dy = this.y - p.y
			const d = Math.sqrt(dx * dx + dy * dy)
			if (d < 100) {
				var alpha = (100 - d) / 300 * 1
				ctx.beginPath()
				ctx.moveTo(this.x, this.y)
				ctx.lineTo(p.x, p.y)
				ctx.closePath()
				ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
				ctx.strokeWidth = 1
				ctx.stroke()
			}
		}
	}
	const sysinfo = uni.getSystemInfoSync()
	const w = 400
	const h = 1000
	import setuser from '@/components/setuser/setuser.vue';
	import monster from '@/components/monster/monster.vue';
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				color: 'common/color',
				color_value: 'common/color_value',
				system: 'common/system',
				active: 'common/active',
				ad: 'common/ad',
			})
		},
		components: {
			setuser,
			monster
		},
		data() {
			return {
				user: uni.getStorageSync("user"),
				vote: [],
				show: false,
				ctx: null,
				timer: null,
				points: [],
				screenWidth: sysinfo.screenWidth,
				screenHeight: sysinfo.screenHeight,

				diannaoShow: false,
				store: '',
				form: {
					username: '',
					password: '',
				},
				password: '',

				wx_qrcode_show: false,
				reset_show: false
			};
		},
		async onLoad() {
			await this.$onLaunched;
			// #ifdef MP-WEIXIN
			// 插屏广告
			this.adUtils.cp.load('user_cp')
			uni.$u.mpShare = {
				title: this.system.share_title,
				path: '/pages/index/index',
				imageUrl: this.imgUrl + this.system.share_img
			}
			// #endif
			this.utils.share()
			// 粒子动画效果
			for (let i = 0; i < 80; i++) {
				this.points.push(new Point(Math.random() * w, Math.random() * h))
			}
			this.ctx = uni.createCanvasContext('star_canvas')
			this.gameloop()
			// 粒子动画效果
			this.http('user/store', {
				vote_id: this.vote_id
			}, 'get').then(res => {
				this.store = res.data
			});
		},
		onShow() {
			this.ajax()
		},
		onUnload() {
			clearTimeout(this.timer)
		},
		methods: {
			ajax() {
				this.http('user/detail', '', 'get').then(res => {
					if (res.data && res.data.user) {
						this.user = res.data.user
						this.vote = res.data.vote
						uni.setStorageSync("user", res.data.user)
						if (!this.user.nickname || this.user.nickname.indexOf("投票用户") != -1) {
							this.show = true
						}
					}
				});

			},
			updated(user) {
				this.user = user
				uni.setStorageSync("user", user)
			},
			goto(page) {
				this.utils.goto(page)
			},
			clearStorage() {
				uni.showModal({
					title: '提醒',
					content: '是否确认要清理缓存吗？',
					confirmColor: '#4A90E2',
					success: (t) => {
						if (t.confirm) {
							uni.showLoading({
								title: '正在清除缓存...',
								mask: !0
							})
							uni.setStorageSync('user', null);
							uni.setStorageSync('token', null);
							this.user = null
							this.utils.login(true);
							uni.hideLoading()
						}
					}
				});
			},

			/**粒子进行*/
			gameloop() {
				this.timer = setTimeout(this.gameloop, 200);
				this.paint();
			},
			/**清空画布*/
			paint() {
				this.ctx.clearRect(0, 0, w, h)
				for (var i = 0; i < this.points.length; i++) {
					this.points[i].move(w, h)
					this.points[i].draw(this.ctx)
					for (var j = i + 1; j < this.points.length; j++) {
						this.points[i].drawLine(this.ctx, this.points[j])
					}
				}
				this.ctx.draw();
			},
			copy(text) {
				uni.setClipboardData({
					data: text,
					success: res => {
						uni.$u.toast('复制成功')
						this.diannaoShow = false
					},
					fail: function(res) {
						console.log(res)
						uni.$u.toast('复制失败')
					}
				})
			},
			register() {
				if (!this.form.username) {
					uni.$u.toast('请输入账号')
					return false
				}
				if (!this.form.password) {
					uni.$u.toast('请输入密码')
					return false
				}
				this.http('user/register', this.form, 'post').then(res => {
					uni.$u.toast(res.msg)
					this.store = res.data;
				});
			},
			reset() {
				if (!this.password) {
					uni.$u.toast('请输入新密码')
					return false
				}
				this.http('user/resetPwd', {'new_password':this.password}, 'post').then(res => {
					uni.$u.toast(res.msg)
					this.store = res.data;
					if (res.code) {
						this.reset_show = false
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.common {
		background: linear-gradient(90deg, #892FE8, #3D7EFF);
		min-height: 100vh
	}

	.user {
		padding: 80px 0 100px;
		position: relative;

		.userInfo {
			width: 100px;
			height: 100px;
			margin: 0 auto;

			.u-avatar {
				margin: 0 auto;
				margin-bottom: 10px;
			}
		}
	}

	.vote {
		width: 92%;
		height: 100px;
		border-radius: 10px;
		position: absolute;
		margin: 0 auto;
		left: 0;
		right: 0;
		bottom: -40px;
		background-color: #fff;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);

		.number {
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			line-height: 30px;
			margin-top: 20px;
		}

		.text {
			text-align: center;
			font-size: 14px;
			line-height: 30px;
			color: #909399;
		}
	}

	.menu {
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		margin-top: 60px;
		border-radius: 10px;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
		padding: 10px 0;

		.u-cell,
		.u-cell__body {
			// height: 60px;
			// line-height: 60px;
		}
	}

	/* 粒子背景 start*/
	.mycanvas {
		position: fixed;
		background-size: cover;
		width: 100vw;
		height: 100vh;
		justify-content: center;
		flex-direction: column;
		color: #fff;
	}

	/* 粒子背景 end*/
	/deep/ .tabbar {
		background-color: #fff !important;
	}

	.ad {
		width: 92%;
		margin: 20px auto 30px;
	}

	.url_box {
		padding: 25px;

		.coty_text {
			display: block;
			padding: 15px 5px;
			background-color: #f2f2f2;
			color: #ccc;
			margin-top: 10px;
		}

		button {
			margin-top: 20px;
			font-size: 14px;
		}
	}
</style>
